<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入ElementUI样式 -->
		<link rel="stylesheet" href="../../element/css/index.css" />
		<!--引入vue的库，一定要在element库文件之前-->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="../../element/vue.js"></script>
		<!-- 引入ElementUI组件库 -->
		<script src="../../element/elmentui_index.js"></script>
		<!-- <script src="element/elmentui_table.js"></script> -->
		<!-- 引入axios库，完成后台异步请求的http通信，替代jquery ajax（也可以使用） -->		
		<script src="../../element/axios.min.js"></script>
		 <!-- 解决axios跨域无法传递form表单数据到后台实体类的问题 -->		
		<script src="../../element/qs.min.js"></script>
	</head>
	<body>
		<div id="app" style="width: 80%;margin: auto;">
			<!-- 条件筛选查询操作 -->
			<el-form ref="form" :model="UserInfo" label-width="80px" size="mini">
			 <el-row>
			   <el-col :span="12">
				   <el-form-item label="用户名">
				     <el-input v-model="UserInfo.username"></el-input>
				   </el-form-item>
				</el-col>
			   <el-col :span="12">
				   <el-form-item label="地址">
				        <el-input v-model="UserInfo.useraddress"></el-input>
				      </el-form-item>	
				</el-col>
			 </el-row>			 					  			  			 			  
			  <el-form-item size="large">
			    <el-button type="primary" @click="selectInfo()">查询</el-button>
			    <el-button type="info" @click="resetInfo()">重置</el-button>
				<el-button type="success" @click="addUserInfo()">新增</el-button>
			  </el-form-item>
			</el-form>
			<!--显示列表数据 -->
			 <el-table
			    ref="multipleTable"
			    :data="userInfoList"
			    tooltip-effect="dark"
			    style="width: 100%"
			    @selection-change="handleSelectionChange">
			    <el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
				 <el-table-column
					 label="#"
				      type="index"
				      width="50">
				    </el-table-column>
			    <el-table-column
				  prop="username"
			      label="用户名"
			      width="120">		      
			    </el-table-column>
			    <el-table-column
			      prop="userpwd"
			      label="密码"
			      width="120">
			    </el-table-column>
			    <el-table-column
			      prop="useraddress"
			      label="地址"
			      show-overflow-tooltip>
			    </el-table-column>
				<el-table-column
				  prop="usertel"
				  label="电话"
				  width="180">
				</el-table-column>
				 <el-table-column
				      fixed="right"
				      label="操作"
				      width="100">
				      <template slot-scope="scope">
				        <el-button @click="editUserinfo(scope.row)" type="text" size="small">编辑</el-button>
				        <el-button type="text" size="small">删除</el-button>
				      </template>
				    </el-table-column>
			  </el-table>
			  
			  <!-- 新增或编辑的弹出框 -->					  
			  <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
			    <el-form :model="EditUserInfoBean">
			      <el-form-item label="用户名" :label-width="formLabelWidth">
			        <el-input v-model="EditUserInfoBean.username" autocomplete="off"></el-input>
			      </el-form-item>
			     <el-form-item label="密码" :label-width="formLabelWidth">
			       <el-input type="password" v-model="EditUserInfoBean.userpwd" autocomplete="off"></el-input>
			     </el-form-item>
				 <el-form-item label="地址" :label-width="formLabelWidth">
				   <el-input v-model="EditUserInfoBean.useraddress" autocomplete="off"></el-input>
				 </el-form-item>
				 <el-form-item label="电话" :label-width="formLabelWidth">
				   <el-input v-model="EditUserInfoBean.usertel" autocomplete="off"></el-input>
				 </el-form-item>
			    </el-form>
			    <div slot="footer" class="dialog-footer">
			      <el-button @click="dialogFormVisible = false">取 消</el-button>
			      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			    </div>
			  </el-dialog>
			  

		</div>
		<script>
		var app=new Vue({
			el:"#app",
			data:{
				UserInfo:{
					username:"",
					userpwd:"",
					useraddress:"",
					usertel:""										
				},
				userInfoList:[],
				dialogFormVisible:false,
				// 新增或编辑的数据对象
				EditUserInfoBean:{
					// id判断是新增还是修改
					id:null,   
					username:"",
					userpwd:"",
					useraddress:"",
					usertel:""	
				},
				formLabelWidth: '80px'
			},
			methods:{
				selectInfo:function(){
					// 点击查询按钮
					console.log("发送请求")
					var that=this
					var param=Qs.stringify(this.UserInfo)
					// console.log(param)
					// console.log(Qs.stringify(param))
					
					axios.post('http://localhost:8086/nsd_springbootserver/userinfo/getallinfoes', param)
					  .then(function (response) {
					    console.log(response);
						that.userInfoList=response.data
						
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
					
					
					
				},
				resetInfo:function(){
					// 点击重置按钮的
				},
				addUserInfo:function(){
					// 点击新增按钮
					this.dialogFormVisible=true
				},
				handleSelectionChange:function(){
					
				},
				editUserinfo:function(){
					// 点击编辑操作的
					this.dialogFormVisible=true
				}
				
			}
			
			
		})
		
		</script>
		
	</body>
	
</html>
